<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 在失去焦点 或者 按下回车键时才更新   防止每次输入的时候就更新数据 向服务端发送请求  减轻 服务端的压力 -->
        <input v-model.lazy="msg">
        <span> {{msg}}</span>

        <hr>
        <select name="" id=""         v-model='currentSelect'>
            <option  :value="index"   v-for='(item,index) in list'> 

                {{item}}
            </option>
           
        </select>

        <textarea v-model='desc'></textarea>
    </div>
    <script>
        // let arr=['张志雄','谭宇龙','谢雨涵','李仁杰' ,'程正猛', '叶昊','周达','杨汉文','裴许睿']
      let vm=  new Vue({
            el: '#app',
            data: {
                currentSelect:'3',
                list: [],
                desc:'你们是天选之子',
                msg:'我是默认值'
            },
        })


        function randName() {
            let arr = ['张志雄', '谭宇龙', '谢雨涵', '李仁杰', '程正猛', '叶昊', '周达', '杨汉文', '裴许睿']
            let list = []
           

            for (let i = 0; i < arr.length; i++) {
                let leg = arr.length;
                let randIndex = Math.floor(Math.random() * leg)

                list.push(arr[randIndex])
                arr = arr.filter((item, index) => index != randIndex)
            
                if (list.length == 5) {
                    return list
                }

            }

        }

        console.log(randName());

         let  newList = randName()

         vm.list= newList
    </script>
</body>

</html>